<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>时域分析</title>
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <link rel="stylesheet" href="./css/style3.css">
        <link rel="stylesheet" href="./css/formSelects-v4.css" />
        <link href="./css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        
        
        <script src="./js/jquery.min.js"></script>
        <script src="./js/vue.min.js"></script>
        <script src="./js/axios.min.js"></script>    
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

        <!-- 引入 echarts.js -->
        <script src="./js/echarts.min.js"></script>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
        <script>
        MathJax = {
            tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
        };
        </script>
        <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
        <style>
        body{
            display: flex;
            
            justify-content: center;
            align-items: center;
            background-color: rgb(222, 223, 224);
        }

        .flex-container {
            display: -webkit-flex;
            display: flex;
            width: 1920px;
            height: 1080px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
           
            background-color: rgb(222, 223, 224);
        }
        
        .flex-container .flex-item1 {
            background-color: rgb(248, 248, 252);
            width: 65%;
            height: 700px;
            margin: 10px;
            border-radius: 3%;
        }
        .flex-container .flex-item2 {
            background-color: rgb(222, 223, 224);
            width: 32%;
            height: 700px;
            margin: 10px;
            border-radius: 3%;
            
        }
        .flex-container .flex-item2 .it1{
            background-color: rgb(248, 248, 252);
            width: 97%;
            height: 250px;
            margin: 10px;
            border-radius: 3%;
            
        }
        .flex-container .flex-item2 .it2{
            background-color: rgb(248, 248, 252);
            width: 97%;
            height: 430px;
            margin: 10px;
            border-radius: 3%;
            
        }
        div.title span{
            font-size: 30px;
            font-weight: 800;
            padding: 20px;
            text-align:"center";
            
        }
        span.option{
            margin-right:20px;
            font-size:20px;	
        }


        .flex-container .flex-item3 {
            
            background-color: rgb(248, 248, 252);
            width: 85%;
            height: 300px;
            margin: 10px;
            flex-grow:2;
            /* border-radius: 3%; 边界圆弧过渡 */
        
        }      
        </style>
        
    
    </head>

    <body>
        <div >
            

            <div class="flex-container">   
        
                <div class ="flex-item1" id="main" ></div>     
                <div class="flex-item2">
                    <div class="it1">
                        <div class="it1">
                            <div class="title" style="text-align: left; font-size: 25px;"><span >选择设备</span></div>         
                            <div style=" display: inline-block; width: 280px; margin: 15px; vertical-align: top;">
                                <table width="500px" >
                                    <tr>
                                        <td style="font-size: 18px;" ><select id="device" name="city" xm-select="select1" xm-select-max="1" xm-select-direction="down">
                                            <option value="" >请选择需要预测的设备</option>
                                            </select>
                                        </td>
                                        <td>
                                            <button  style="font-size: 17px;" type="button" class="btn btn-primary" onclick= "myFunction()"> 时域分析</button>
                                        </td>
                                    </tr>
                                </table> 
                            </div>
                                                     
                        </div>
                        
                    </div>
                    <div class="it2" id="main2"></div>
                </div>
                <div id="app" class="flex-item3">
                    <div class="title"><span style="font-size: 25px;">操作日志</span></div>
                        <div class="table_position">
                            <table class="table table-hover table-striped">
                                <thead>
                                    <tr style="font-size: 17px;">
                                        <th scope="col">序号</th>
                                        <th scope="col">设备地点</th>
                                        <th scope="col">监测设备</th>
                                        <th scope="col">测点名称</th>
                                        <th scope="col">时域指标名称</th>
                                        <th scope="col">指标值</th>
                                        <th scope="col">操作人员</th>
                                        <th scope="col">操作日期</th>
                                        <th scope="col">设备状况</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="l in dinary" style="font-size: 15px;">
                                        <th scope="row">{{l.idx}} </th>
                                        <td>{{l.pst}} </td>
                                        <td>{{l.eqt}}</td>
                                        <td>{{l.nam}}</td>
                                        <td>{{l.E}}</td>
                                        <td>{{l.V}}</td>
                                        <td>{{l.peo}}</td>
                                        <td>{{l.dat}}</td>
                                        <td>{{l.con}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div>
                            <button style="font-size: 18px;" type="button" class="btn btn-primary" @click="checking">更新日志</button>
                            <button style="font-size: 18px;" type="button" class="btn btn-danger" @click="clear">清除日志</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
        <!-- 日志管理 -->
        <script src="./js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    machine:[{position:"防爆（蒸馏）",equi:"机封水泵",name:"电机自由端1H",err_name:"方差",value:8.1 ,people:"张三",date:"2020-10-10",condition:"良"},
                        {position:"防爆（蒸馏）",equi:"机封水泵",name:"电机负荷端2H",err_name:"标准差",value:10.1 ,people:"张三",date:"2020-10-11",condition:"优"},
                        {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",err_name:"方差",value:9.1,people:"张三",date:"2020-10-12",condition:"中"},
                        {position:"防爆（蒸馏）",equi:"机封水泵",name:"泵负荷端3V",err_name:"峭度",value:16,people:"张三",date:"2020-10-13",condition:"良"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机自由端1H",err_name:"均方根",value:15.1,people:"张三",date:"2020-12-14",condition:"良"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"电机负荷端2H",err_name:"方差",value:10.1,people:"张三",date:"2021-2-15",condition:"优"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",err_name:"均方根",value:9.1,people:"张三",date:"2021-3-10",condition:"中"},
                        {position:"防爆（蒸馏）",equi:"二精塔循环泵",name:"泵负荷端3V",err_name:"峭度",value:16.1,people:"张三",date:"2021-4-10",condition:"良"},],
                    dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",nam:"电机自由端1H",E:"方差",V:8.1,peo:"张三",dat:"2020-10-10",con:"良"}]
                },
                methods:{
                    update_dinary:function(item){
                        // item,err,val
                        var L = this.dinary.length+1;
                        // console.log(L);
                        this.dinary.push({idx:L,pst:item.position,eqt:item.equi,nam:item.name,E:item.err_name,V:item.value,peo:item.people,dat:item.date,con:item.condition});
                        // this.dinary.push({idx:5,pst:"防爆（蒸馏）",eqt:"机封水泵",pot:"驱动端",err:"均方根值", val:5.27});
                    },
                    checking:function(){
                        var getVal =  this.machine;
                        // document.write(getVal);
                        // getVal.splice(0,4);
                        // var ind =Object.keys(this.machine).splice(4,10);
                        getVal.forEach(element => {
                            if(element.value>7){
                                // console.log(element.value);
                                this.update_dinary(element);
                            }
                        });
           
                    },
                    clear:function(){
                        this.dinary.splice(0,this.dinary.length);
                    }
                }
            })
        </script>

        


        <!-- 时域指标 -->
        <script type="text/javascript">
        var data_value=[['value','2020-1-2', '2020-1-3', '2020-1-4', '2020-1-5', '2020-1-6', '2020-1-7', '2020-1-8'],
        ['方差', 120, 132, 101, 134, 90, 230, 210],
        ['标准差',220, 182, 191, 234, 290, 330, 310],
        ['峭度',150, 232, 201, 154, 190, 330, 410],
        ['均方根',320, 332, 301, 334, 390, 330, 320],
        ['脉冲因子',20, 100, 200, 300, 500, 700, 1000],];

        
        
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        

        option = {
            title: {
                text: '时域分析图',
                left:'left',
                padding:20,
                textStyle: {
                        fontWeight: 'bold',
                        fontSize: 22
                    },

            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['方差', '标准差', '峭度', '均方根', '脉冲因子'],
                selected:{
                           '方差':true,
                           '标准差':true,
                           '峭度':true,
                           '均方根':true,
                           '脉冲因子':true
                },
                itemGap: 5,//图例每项之间的间隔
                height: 40,
                itemWidth: 30,//图例标记的图形宽度
                itemHeight: 20,
                
                padding: [5, 0, 0, 0],
                textStyle: {
                    padding: [1, 0, 0, -5]
                },
                data: [
                    { name: "方差", textStyle: {fontSize:20}},
                    { name: "标准差", textStyle: { fontSize:20} },
                    { name: "峭度", textStyle: { fontSize:20} },
                    { name: "均方根", textStyle: { fontSize:20} },
                    { name: "脉冲因子", textStyle: { fontSize:20} },     
                    ]

            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                },
                right:'right',
                padding:15,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2020-1-2', '2020-1-3', '2020-1-4', '2020-1-5', '2020-1-6', '2020-1-7', '2020-1-8']
            },
            yAxis: {
                type: 'value'
            },
            dataset:{
                source:data_value
            },
            series: [
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            ],
            
        };
        myChart.on('updateAxisPointer', function (event) {
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value+1;
                    myChart2.setOption({
                        series: {
                            id: 'bar',
                            
                            encode: {
                                y: dimension,
                                x: dimension
                            }
                        }
                    });
                }
            });


       

        option && myChart.setOption(option);
        </script>

        <!-- 联动的饼图 -->
        <script>
            var myChart2 = echarts.init(document.getElementById('main2'));
            var option2;
            option2={
                title: {
                    text: '数据联动',
                    padding:20,
                    textStyle: {
                        fontWeight: 'bold',
                        fontSize: 22
                    },
                    
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                dataset:{
                    source:data_value
                },
                
                xAxis: {
                    type: 'category',
                    
                },
                yAxis: {
                    type: 'value',
                    
                },
                series: [
                    {
                        type: 'bar',
                        id: 'bar',
                        
                        // emphasis: {focus: 'data'},
                        label: {
                            formatter: '{b}: {@2020-1-2} ({d}%)'
                        },
                        encode: {
                            // itemName: 'value',
                            itemName: 'value',
                            y: '2020-1-2',
                            x: 'value'
                        }
                    }
                ]
            };
            myChart2.setOption(option2);

            

            
        </script>

        <!-- 设备选择 -->
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
        <script src="../js/layui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var formSelects = layui.formSelects;
            formSelects.data('select1', 'local', {
                arr: [
                    {
                        "name": "蒸馏（防爆）", 
                        "value": 1, 
                        "children": [
                            {"name": "机封水泵", "value": 12, "children": []},
                            {"name": "二精塔循环泵", "value": 17, "children": []},
                            {"name": "粗塔循环泵", "value": 18, "children": []},
                        ]
                    },
                    {
                        "name": "饲料", 
                        "value": 2, 
                        "children": [
                            {"name": "风送（风机）", "value": 51, "children": []},
                        ]
                    },
                    {
                        "name": "空压冷冻站", 
                        "value": 3, 
                        "children": [
                            {"name": "工艺空气压缩机", "value": 13, "children": []},
                            {"name": "仪表空气压缩机", "value": 14, "children": []},
                        ]
                    },
                ],
                linkage: true   //开启联动模式
            });
        </script>

        
  

        <!-- 按钮的功能 -->
        <script>
            function myFunction(){

                for(i=1;i<6;i++){
                    for(j=1;j<7;j++){
                        data_value[i][j]=Math.random() * 300;

                    }
                }

                myChart.setOption({
                    dataset:{
                        source:data_value
                    },
                    series: [
                        {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    ],
                });

                // var device_data=$("select[name='city']").val();
                // alert(device_data);

              

            }
            document.getElementById('device').onclick = function(){
                    //获取当前多选选中的值
                    var selectArr = formSelects.getValue();
                    document.getElementById('device').innerHTML = JSON.stringify(selectArr, null, 2);
                    

                }

        </script>





        


    </body>
</html>